<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">等级徽章</block>
		</cu-custom>
		
		<!-- 头像信息 begin -->
		<view v-if="isInit" class="cu-list menu-avatar">
			<view class="cu-item">			
				<view class="cu-avatar round lg" :style="'background-image:url('+userinfo.avatar+');'"></view>
				
				<view class="content">						
					<view class="flex justify-between" v-if="userinfo.isAuth">
						<view style="display: block;">
							<view class="text-black flex">
								<text>{{userinfo.name}}
									<text v-if="task==0" class="text-sm margin-left-xs text-grey">总获得<text class="text-red margin-lr-xs">{{userinfo.exp}}</text>经验</text>
									<text v-else class="text-sm margin-left-xs text-grey"><text class="text-blue margin-right-xs">{{taskName}}</text> 获得 <text class="text-orange margin-lr-xs">{{count}}</text>经验</text>
								</text>
							</view>
							<view class="text-sm" style="width: 500rpx;">
								<view class="flex align-center">
									
									<image style="width: 25px;height: 25px;" mode="aspectFit" :src="userinfo.levelDetail.img"></image>	
																
									<view class='flex align-center'>
										<view class="cu-progress sm radius margin-left-sm" style="width: 200rpx;">
											<view class="bg-green" :style="[{ width:userinfo.levelPercent.toFixed(0)+'%'}]">
												{{userinfo.levelPercent.toFixed(0)}}%
											</view>
										</view>
										<text v-if="!userinfo.levelDetail.isMax" class="text-grey margin-left-sm">{{userinfo.exp}} / {{userinfo.levelDetail.expMax}}</text>
										<text v-else class="text-orange margin-left-sm">达到最高级</text>
									</view>
									
								</view>
							</view>
						</view>							
					</view>
					
					<view v-else @tap="goReg" class="text-bold text-black">
						请点击授权
					</view>						
				</view>				
			</view>
			<uniSticky>
				<navLongTab :tabTitle="tabs" @changeTab="changeTab"></navLongTab>
			</uniSticky>
		</view>
		<!-- 头像信息 end -->
		
		<view v-if="isInit" :style="'height:'+screenHeight+'px;'">
			
			<!-- 列表部分 begin -->
			<mescroll-uni v-if="tabNow==0||tabNow==1||tabNow==2" ref="mescrollRef" :fixed="false" top="0" :bottom="0"  @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
			
				<mescroll-empty v-if="list.length==0"></mescroll-empty>
				
				<view class="cu-card dynamic">
					
					<!-- 查询按钮 begin -->
					<view class="padding" v-if="tabNow==0">
						
						<scrollList :list="task_list" :btnIndex="taskIndex" @change="changeTask"></scrollList>
						
					</view>
					<!-- 查询按钮 end -->
					<!-- 经验部分 begin -->
					<view v-if="tabNow==0" class="cu-item shadow padding" :style="index==0?'margin-top:0px;':''"  v-for="(item,index) in list" :index="index" :item="item" :key="index">
						<view class="flex justify-between">
							<view>
								<text>完成:<text :class="item.task.color">{{item.task.name}}</text></text>
								<text class="margin-left">经验:<text class="text-red margin-lr-xs">{{item.exp}}</text> 点</text>								
							</view>
						</view>
						<view class="text-grey margin-top-sm text-sm flex justify-between">
							任务:{{item.task.descr}}
						</view>
						<text class="text-grey margin-top-sm text-sm" style="display: inline-block;">
							完成时间 : [{{item.createTime}}]
						</text>
					</view>
					<!-- 经验部分 end -->
					
					<!-- 徽章部分 begin -->
					<view v-if="tabNow==1" class="cu-item shadow padding"  v-for="(item,index) in list" :index="index" :item="item" :key="index">
						
						<view class="flex justify-between">
							<view>						
								<view class="flex justify-between">
									<view>
										<text>徽章名称:<text>{{item.badge.name}}</text></text>						
									</view>
								</view>
								<view class="text-grey margin-top-sm text-sm flex justify-between">
									完成任务:{{item.badge.descr}}
								</view>
								<text class="text-grey margin-top-sm text-sm" style="display: inline-block;">
									获得时间 : [{{item.createTime}}]
								</text>
							</view>
							<view class="margin-right flex justify-start align-center">
								<image style="width: 100rpx;height: 100rpx;" :src="item.badge.img">
							</view>
						</view>
						
					</view>
					<!-- 徽章部分 end -->
					
					<!-- 级别部分 begin -->
					<view class="cu-card dynamic" v-if="tabNow==2">
						<view class="cu-item shadow padding"  v-for="(item,index) in list" :index="index" :item="item" :key="index">
							<view class="flex justify-between">
								<view>						
									<view class="flex justify-between">
										<view>
											<text>级别名称:<text>{{item.name}}</text></text>						
										</view>
									</view>
									<view class="text-gray margin-top-sm text-sm flex justify-between">
										级别奖励:{{item.descr}}
									</view>
									<text class="text-gray margin-top-sm text-sm" style="display: inline-block;">
										经验范围:<text class="text-orange">{{item.expMin}}</text>至<text class="text-red">{{item.expMax}}</text> 经验
									</text>
								</view>
								<view class="margin-right flex justify-start align-center">
									<image style="width: 80rpx;height: 80rpx;" :src="item.img">
								</view>
							</view>
						</view>
					</view>
					<!-- 级别部分 end -->
					
				</view>
			
			</mescroll-uni>
			<!-- 列表部分 end -->
			
			<!-- 积分明细 begin -->
			<scroll-view v-if="tabNow==3" scroll-y="true" style='height:75vh;'>
				<view class="cu-card dynamic">					
						<view class="cu-item shadow"  v-for="(item,index) in list" :index="index" :item="item" :key="index">
							
							<view class="padding-top text-bold padding-bottom-xs padding-left">
								{{item.name}}								
							</view>
							
							<view class="cu-list menu sm-border" >
								<view class="cu-item" v-if="item1.exp>0" v-for="(item1,index1) in item.taskList" :index="index1" :key="index1" >
									<view class="content">
										<image style="height: 36rpx;" :src="item1.img" mode="aspectFit"></image>
										<text class="text-df">{{item1.name}}</text>
									</view>
									<view class="action">
										<text>经验 <text :class="'margin-lr-xs'+ (item1.exp<30?' text-yellow':' text-red')">+{{item1.exp}}</text></text>
									</view>
								</view>
							</view>
								
						</view>					
				</view>
			</scroll-view>
			<!-- 积分明细 end -->
			
		</view>
		<view class="cu-load load-modal" v-if="!isInit">
			<view class="gray-text">加载中...</view>
		</view>
		
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; // 非uni_modules版本
	import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"; // 非uni_modules版本
	import navLongTab from "@/components/tab/navLongTab.vue"
	
	import scrollList from '@/components/scroll/scroll-list.vue';
	
	import * as confirm from '@/common/confirm.js'	
	import {formatDateTime} from "@/common/util.js"
	
	export default {
		mixins: [MescrollMixin],
		components:{
		        navLongTab,scrollList,MescrollBody
		},
		data() {
			return {
				//初始化函数
				userinfo:{},
				isInit:false,
				upOption: {
					page: {
						size: 6 // 每页数据的数量,默认10
					},
					empty: {
						tip: '暂无经验信息',
					},
					textNoMore:'-- 没有更多信息 --',
					toTop:{
						offset:200,
						bottom: '210rpx',
					}
				},
				screenHeight:this.s_h_notb-(this.upx2px*140).toFixed(0),
				list:[],
				tabNow:0,
				
				taskName:'',
				count:0,				
				task:0,
				taskIndex:0,
				task_list:[{name:'全部'}],
				
				tabs:[{name:'经验明细'},{name:'我的徽章'},{name:'经验级别'},{name:'经验任务'}]
			}
		},
		onLoad(){
			this.$api.post('/user/ckIsAuth').then(res => {
				this.userinfo=res.data
				
				this.$api.post('/common/exp_task_list').then(res => {
					this.task_list=res.data
					this.isInit=true					
				})
				
			})			
		},
		methods: {
			changeTab(index){
				this.tabNow=index
				this.list=[]
				
				this.$nextTick(()=>{
					if(index!=3){
						this.mescroll.resetUpScroll();
					}else{
						this.$api.post('/common/task_group').then((res)=>{
							this.list=res.data
						})
					}
				})
			},
			getDateDiff(date){
				return formatDateTime(new Date(date),'yyyy-MM-dd')
			},
			changeTask(type,index){
				if(index!=this.taskIndex){
					this.taskIndex=index
					
					this.taskName=type.value
					
					this.task=type.key
					this.list=[]
					this.$nextTick(()=>{
						this.mescroll.resetUpScroll();
					})
				}
			},
			upCallback(page){
				
				let _this=this
				let pageNum = page.num; // 页码, 默认从1开始
				
				let params={
					"page":pageNum,
				}
				
				let url='/user/exp_page';
				if(this.tabNow==0){
					params.task=this.task
				}
				
				if(this.tabNow==1){
					url='/user/badge_page';
				}
				
				if(this.tabNow!=2){
				
					this.$api.post(url,params).then(res => {
						let data;
						if(this.tabNow==0){
							data=res.data.list;
							this.count=res.data.count==null?0:res.data.count
						}else{
							data=res.data;
						}
						
						let curPageData = data.records;
						let curPageLen=curPageData.length
						let totalSize=data.total;
						
						if(page.num == 1) _this.list = []; //如果是第一页需手动置空列表
						_this.list = _this.list.concat(curPageData); //追加新数据
												
						_this.mescroll.endBySize(curPageLen, totalSize);
						
						this.$nextTick(()=>{
							if(!this.isInit){
								this.isInit=true
							}
						})
					})
				
				}else{
					this.$api.post('/common/level_list').then(res => {
						this.$nextTick(()=>{
							_this.list=res.data
							_this.mescroll.endBySize(7, 7);
						})
					})
				}			
				
			},
		}
	}
</script>

<style>

</style>
